<template>
    <view>
        <view class="search flex">
            <view class="left flexCenter" @click="show = true">
                <text class="text">{{ label }}</text>
                <image class="arrow" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/arrow-right.png" />
            </view>
            <view class="right flexAlignCenter">
                <image class="icon" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png" />
                <input
                    class="input"
                    v-model="value"
                    type="text"
                    placeholder="请输入用户ID/手机号"
                    @confirm="onConfirm"
                />
            </view>
        </view>
        <view class="content" v-if="data.length">
            <view class="thead">
                <text class="w200">用户信息</text>
                <text class="w110Txt">身体外形特征1</text>
                <text class="w110Txt">身体外形特征2</text>
                <text class="w110Txt">病理历史</text>
                <text class="w110Txt">身体内在表现</text>
                <text class="w110">测评结果</text>
                <text class="w110Txt">测评时间</text>
            </view>
            <View class="tbody">
                <view class="row" v-for="(item, index) in data" :key="index">
                    <view class="w200">
                        <View>{{ item.userName }} | {{ item.phone }}</View>
                        <View class="text">ID：{{ item.bizUserId }}</View>
                    </view>
                    <text class="w110Txt">{{ item.feature.one.names.join("/") || "/" }}</text>
                    <text class="w110Txt">{{ item.feature.two.names.join("/") || "/" }}</text>
                    <text class="w110Txt">{{ item.feature.other.names.join("/") || "/" }}</text>
                    <text class="w110Txt">{{ item.feature.inter.names.join("/") || "/" }}</text>
                    <text class="w110">{{ item.evaluationResult || "/" }}</text>
                    <text class="w110Txt">{{ item.evaluationTime || "/" }}</text>
                </view>
            </View>
        </view>
        <u-loadmore
            v-if="data.length"
            :status="status"
            loadingText="加载中"
            loadmoreText="上拉加载更多"
            nomoreText="已经到底啦～"
            fontSize="28"
            iconSize="30"
            marginTop="20"
            marginBottom="30"
        />
        <view class="_empty" v-else>
            <image src="https://admin.ximusen.cn/profile/upload/ximusen_mini_app_img/noShiPu.png" class="image" />
            <view class="title">{{ !value ? "暂无数据" : "未搜索到相关数据" }}</view>
        </view>
        <u-action-sheet
            :actions="list"
            :show="show"
            round="20"
            cancelText="取消"
            @close="show = false"
            @select="onSelect"
        />
    </view>
</template>

<script>
import { mapState } from "vuex";
import onPullDownRefresh from "../../../mixin/onPullDownRefresh";

export default {
    mixins: [onPullDownRefresh],
    data() {
        return {
            label: "全部客户",
            type: 0,
            list: [
                { name: "全部客户", value: 0 },
                { name: "我的客户", value: 1 },
            ],
            show: false,
            value: "",
            userId: "",
        };
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        onSelect(item) {
            this.label = item.name;
            this.type = item.value;
            this.onRefresh();
        },
        onConfirm(e) {
            this.value = e.detail.value;
            this.onRefresh();
        },
        async onRequest() {
            const { type, value, pageNum, pageSize, userId } = this;
            return await this.request.httpTokenJsonRequest(
                "/mp-api/wx/empCustom/evaluationList",
                { type, value, userId, pageNum, pageSize, orderByColumn: "evaluationTime", isAsc: "descending" },
                "get",
            );
        },
    },
    onLoad(options) {
        this.userId = options.userId || "";
        if (options.phone) {
            this.value = options.phone;
        }
        this.onRefresh();
    },
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
